<template>
  <div>
    <Drawer
      v-model:visible="appStore.designerVisible"
      header="Theme Designer"
      position="right"
      class="designer !w-screen md:!w-[50rem]"
      :modal="false"
      :dismissable="false"
      @after-show="onShow"
      @after-hide="onHide"
      :pt="{
        header: 'p-5',
        content: '!p-5',
        footer: '!p-5',
      }"
    >
      <Tabs v-model:value="appStore.designerActiveTab" :lazy="deferredTabs">
        <TabList>
          <Tab value="0">Base</Tab>
          <Tab value="1">Primitive </Tab>
          <Tab value="2">Semantic</Tab>
          <Tab value="3">Component</Tab>
          <Tab value="4">Custom</Tab>
        </TabList>
        <TabPanels class="!px-0">
          <TabPanel value="0">
            <DesignScale />
          </TabPanel>
          <TabPanel value="1">
            <DesignBaseTheme />
            <DesignBorderRadius />
            <DesignColors />
          </TabPanel>
          <TabPanel value="2">
            <Accordion :value="['0', '1']" multiple>
              <AccordionPanel value="0">
                <AccordionHeader>Common</AccordionHeader>
                <AccordionContent>
                  <div class="flex flex-col gap-3">
                    <form class="flex flex-col gap-3">
                      <DesignGeneral />
                      <DesignFormField />
                      <DesignList />
                      <DesignNavigation />
                      <DesignOverlay />
                    </form>
                  </div>
                </AccordionContent>
              </AccordionPanel>
              <AccordionPanel value="1">
                <AccordionHeader>Color Scheme</AccordionHeader>
                <AccordionContent>
                  <Tabs value="cs-0">
                    <TabList>
                      <Tab value="cs-0">Light</Tab>
                      <Tab value="cs-1">Dark</Tab>
                    </TabList>
                    <TabPanels class="!px-0">
                      <TabPanel value="cs-0">
                        <form @keydown="onKeyDown">
                          <DesignCS :value="themeStore.TempTheme.semantic.colorScheme.light" />
                        </form>
                      </TabPanel>
                      <TabPanel value="cs-1">
                        <form @keydown="onKeyDown">
                          <DesignCS :value="themeStore.TempTheme.semantic.colorScheme.dark" />
                        </form>
                      </TabPanel>
                    </TabPanels>
                  </Tabs>
                </AccordionContent>
              </AccordionPanel>
            </Accordion>
          </TabPanel>
          <TabPanel value="3">Component</TabPanel>
          <TabPanel value="4">Custom</TabPanel>
        </TabPanels>
      </Tabs>
      <template #footer>
        <div class="flex gap-2 justify-between">
          <div class="flex gap-2">
            <Button label="重置" severity="secondary" @click="themeStore.ResetTheme()" />
            <Button label="预览" severity="secondary" @click="themeStore.PreviewTheme()" />
          </div>
          <Button label="应用" severity="Primary" @click="themeStore.ApplyTheme()" />
        </div>
      </template>
    </Drawer>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { useAppStore } from '@/stores/useAppStore'
  // import DesignBorderRadius from '../../layouts/components/primitive/DesignBorderRadius.vue'
  // import DesignColors from '../../layouts/components/primitive/DesignColors.vue'
  // import DesignBaseTheme from '../../layouts/components/primitive/DesignBaseTheme.vue'
  // import DesignScale from '../../layouts/components/primitive/DesignScale.vue'
  // import DesignGeneral from '../../layouts/components/semantic/DesignGeneral.vue'
  // import DesignFormField from '../../layouts/components/semantic/DesignFormField.vue'
  // import DesignList from '../../layouts/components/semantic/DesignList.vue'
  // import DesignNavigation from '../../layouts/components/semantic/DesignNavigation.vue'
  // import DesignOverlay from '../../layouts/components/semantic/DesignOverlay.vue'
  // import DesignCS from '../../layouts/components/semantic/colorscheme/DesignCS.vue'
  import { useThemeStore } from '@/stores/useThemeStore'

  const appStore = useAppStore()
  const themeStore = useThemeStore()
  const deferredTabs = ref(true)

  onMounted(() => {
    // console.log(themeStore.TempTheme)
    themeStore.generateACTokens(null, themeStore.TempTheme)
    themeStore.replaceColorPalette()
    // console.log(themeStore.acTokens)
  })

  const onShow = () => {
    //当 Drawer 打开时，禁用懒加载，这样下次打开时不会再重新加载内容
    deferredTabs.value = false
  }
  const onHide = () => {
    //当 Drawer 关闭时，重新启用懒加载，这样下次打开时又会重新加载内容，可以确保内容的新鲜度
    deferredTabs.value = true
  }

  // 应用主题
  const onKeyDown = (event: KeyboardEvent) => {
    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
      //themeStore.ApplyTheme()
      event.preventDefault()
    }
  }
</script>
<style scoped></style>
